import React, { Component } from 'react'
import {
    StyleSheet,
    View,
    Image,
} from 'react-native';

// 导航切换
import TabNavigator from 'react-native-tab-navigator';

import HomeIndex from './HomeIndex';
import MyPage from '../My/MyPage';
import {setSpText,setHW} from '../../component/ScreenUtil';
export default class HomePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'home'
        }
    }
    render() {
        return (
            <View style={styles.appContainer}>
                <TabNavigator
                    tabBarStyle={styles.tabBar}
                >
                    { this._renderTab(HomeIndex, 'home', '首页', require('../../assets/imgs/home.png'), require('../../assets/imgs/home_active.png'))}
                    { this._renderTab(MyPage, 'my', '我的', require('../../assets/imgs/my.png'), require('../../assets/imgs/my_active.png'))}
                </TabNavigator>
            </View>
        );
    }

    _renderTab(Component, selectedTab, title, renderIcon, activeIcon) {
        return (
            <TabNavigator.Item
                selected={this.state.selectedTab === selectedTab}
                selectedTitleStyle={styles.selectedTitleStyle}
                titleStyle={styles.titleStyle}
                title={title}
                renderIcon={() => <Image style={styles.image} source={renderIcon} />}
                renderSelectedIcon={() => <Image style={styles.image} source={activeIcon} />}
                onPress={() => this.onPressfun(selectedTab)}>
                <Component {...this.props} />
            </TabNavigator.Item>
        )
    }
    onPressfun(selectedTab){
        if(this.state.selectedTab == selectedTab) return;
        // console.log(this,'thittttttttttttttttthis')
        if(this.state.selectedTab!==selectedTab){
            this.setState({ selectedTab: selectedTab })
        }
    }
}

const styles = StyleSheet.create({
    appContainer: {
        flex: 1,
    },
    tabBar: {
        // height: 60,
        backgroundColor: '#fff' // tabBar 背景色
    },
    image: {
        height: setHW(40),
        width:  setHW(40),
    },
    titleStyle: {
        fontSize: setSpText(24),
    },
    selectedTitleStyle: {
        color: '#FF8A00',
        fontSize: setSpText(24)
    }
});